<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量代付</title>
    <script src="jquery-1.12.4.min.js"></script>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>

<div>
    <button type="button" class="add-trans-form">增加</button>
</div>
<br>
<span class="logging"> </span>
<hr>
<div class="trans-form">
    <div class="trans-form-item" style="margin-right:2px;margin-top:2px;width: 400px;height: 250px;float: left;border:1px black solid">
        银行编号：<input name="bankId" type="text"><br/>
        银行卡号：<input name="accountNo" type="text"><br/>
        银行卡户名：<input name="accountName" type="text"><br/>
        账户类型：<input name="accountType" type="text"><br/>
        身份证号：<input name="idNumber" type="text"><br/>
        银行支行名：<input name="branchName" type="text"><br/>
        开户省份：<input name="province" type="text"><br/>
        开户城市：<input name="city" type="text"><br/>
        金额：<input name="amount" type="text"><br/>
        备注：<input name="remark" type="text"><br/>
    </div>
</div>

<button type="button" class="submit-trans">提交代付</button>

</body>
<script>
$(".add-trans-form").on('click',function () {
    $(".trans-form").append('<div class="trans-form-item" style="margin-right:2px;margin-top:2px;width: 400px;height: 250px;float: left;border:1px black solid">\n' +
        '        银行编号：<input name="bankId" type="text"><br/>\n' +
        '        银行卡号：<input name="accountNo" type="text"><br/>\n' +
        '        银行卡户名：<input name="accountName" type="text"><br/>\n' +
        '        账户类型：<input name="accountType" type="text"><br/>\n' +
        '        身份证号：<input name="idNumber" type="text"><br/>\n' +
        '        银行支行名：<input name="branchName" type="text"><br/>\n' +
        '        开户省份：<input name="province" type="text"><br/>\n' +
        '        开户城市：<input name="city" type="text"><br/>\n' +
        '        金额：<input name="amount" type="text"><br/>\n' +
        '        备注：<input name="remark" type="text"><br/>\n' +
        '    </div>');
});
$(".submit-trans").on('click',function () {
    var params = [];
    $(".trans-form-item").each(function () {
        var bankId = $(this).find("[name=bankId]").val();
        var accountNo = $(this).find("[name=accountNo]").val();
        var accountName = $(this).find("[name=accountName]").val();
        var accountType = $(this).find("[name=accountType]").val();
        var idNumber = $(this).find("[name=idNumber]").val();
        var branchName = $(this).find("[name=branchName]").val();
        var province = $(this).find("[name=province]").val();
        var city = $(this).find("[name=city]").val();
        var amount = $(this).find("[name=amount]").val();
        var remark = $(this).find("[name=remark]").val();
        var param = {
            bankId:bankId,
            accountNo:accountNo,
            accountName:accountName,
            accountType:accountType,
            idNumber:idNumber,
            branchName:branchName,
            province:province,
            city:city,
            amount:amount,
            transNo: new Date().getTime(),
            remark:remark
        }
        params.push(param);
    });

    console.log(params);
    $.ajax({
        type: 'POST',
        url: "/payment/request-substitute",
        data: {
            details:JSON.stringify(params),
            remark:"测试",
            payeeType:"BANK"
        },
        success: function (e) {
            $('.logging').text(JSON.stringify(e))
            console.log(e);
        }, error: function (e) {
            $('.logging').text(e.responseText);
            console.log(e);
        },
        dataType: "json"
    });

})
</script>
</html>